<!DOCTYPE html>
<html lang="zh-cn">
<head>
	{include file="common/header" /}
	{include file="common/css" /}
	{include file="common/js" /}
</head>
<body>
    <div id="wrapper">
		{include file="common/dialog" /}
		{include file="common/navbar" /}
        <div id="page-wrapper">			
			<div class="row" id="getlist_table">
                <div class="col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        	用户管理 - <span class="table_title">管理员列表</span>
							<button type="button" class="btn btn-success btn-xs" id="btn_add">添加管理员</button>
                        </div>
                        <div class="panel-body">							
							<div class="table-responsive">
                                <table class="table table-hover" id="datalist">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>用户名</th>
                                            <th>加入时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>										
                                    </tbody>
                                </table>
                            </div>							
							<div id="page_nav">
								<span id="page_index">页次 <span id="page">1</span> / <span id="page_count">10</span></span>
								<button class="btn btn-outline btn-link" type="button" id="page_first">首页</button>
								<button class="btn btn-outline btn-link" type="button" id="page_prev">上一页</button>
								<button class="btn btn-outline btn-link" type="button" id="page_next">下一页</button>
								<button class="btn btn-outline btn-link" type="button" id="page_last">末页</button>
							</div>
							
						</div>
					</div>
				</div>
			</div>			
			
			<div class="row" id="add_table">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        	用户管理 - <span class="table_title">添加管理员</span>
							<button type="button" class="btn btn-success btn-xs" id="btn_getlist">管理员列表</button>
						</div>
                        <div class="panel-body">
							<form id="main_form" role="form">
								<div class="form-group">
									<table>
										<tr>
											<td class="title_column">
												<label>用户名：</label>
											</td>
											<td>
												<input class="form-control" placeholder="请输入用户名" id="name" name="name" />												
											</td>
										</tr>
										<tr>
											<td class="title_column">
												<label>密码：</label>
											</td>
											<td>
												<input class="form-control" placeholder="请输入确认密码" type="password" id="pwd" name="pwd" />
											</td>
										</tr>
										<tr>
											<td class="title_column">
												<label>确认密码：</label>
											</td>
											<td>
												<input class="form-control" placeholder="请输入确认密码" type="password" id="pwd2" name="pwd2" />
											</td>
										</tr>
										<tr>
											<td colspan="2">
												<div class="btn_submit_div">
													<input type="hidden" id="id" name="id" />
													<input type="submit" id="btn_submit" class="btn btn-outline btn-primary" value="添加" />
												</div>
											</td>
										</tr>
									</table>									
								</div>
							</form>	
						</div>
					</div>
				</div>
			</div>
			<script src="{$Think.config.web_res_root}mgr/js/user/show.js"></script>
<script>


$(function() {
	
	var curr_page = 1;
	var page_count = 1;

	function show_data(page) {
	
		var data = {
			get_data: 1,
			page: page
		};
	
		$.ajax({
			url: cfg.web_root + "mgr/user/show",
			type: "get",
			dataType: "json",
			data: data,
			beforeSend: function() {
			
			},
			success: function(res, status) {
				if(res.code == 0) {
				
					$("#datalist > tbody").empty();
					for(var i = 0; i < res.data.list.length; i++) {				
						var row = "<tr>";
						row += "<td>" + res.data.list[i].id + "</td>"
						row += "<td>" + res.data.list[i].name + "</td>";
						row += "<td>" + res.data.list[i].add_time + "</td>";
						row += "<td>";
						row += "<button class=\"btn btn-outline btn-link btn-xs\" type=\"button\" id=\"btn_del_" + res.data.list[i].id + "\" data-id=\"" + res.data.list[i].id + "\">删除</button>";
						row += "</td>";
						row += "</tr>";
					
						$("#datalist > tbody").append(row);
					}
				
					page = res.data.page;
					page_count = res.data.page_count;				
					$("#page").html(page);
					$("#page_count").html(page_count);
				
					//点击删除
					$("button[id ^= 'btn_del_']").click(function() {
						var curr_obj = $(this);			
						var data = {
							id: curr_obj.attr("data-id")
						};
						$("#dialog_confirm").find(".modal-body").html("确定删除吗？");
						$("#dialog_confirm").modal('show');
						$("#dialog_confirm_btn").unbind().click(function() {
						
							$.ajax({
								url: cfg.web_root + "mgr/user/del",
								type: "get",
								dataType: "json",
								data: data,
								beforeSend: function() {
									curr_obj.attr("disabled", true);
								},
								success: function(res, status) {
									$("#dialog_confirm").modal("hide");						
									if(res.code == 0) {
									
										show_data(curr_page);
									}
									else {
										$("#dialog_alert").find(".modal-body").html(res.msg);
										$("#dialog_alert").modal("show");		
									}
								},
								complete: function() {
									curr_obj.attr("disabled", false);
								}
							});
						
						});
					
					});
				}
			},
			complete: function() {
			
			}
		});
	
	}
	
	show_data(curr_page);		
	$("#page_first").click(function() {
		curr_page = 1;		
		show_data(curr_page);	
	});
	$("#page_prev").click(function() {
		curr_page--;
		if(curr_page < 1)
			curr_page = 1;
		show_data(curr_page);	
	});
	$("#page_next").click(function() {
		curr_page++;
		if(curr_page > page_count)
			curr_page = page_count;
		show_data(curr_page);
	});
	$("#page_last").click(function() {
		curr_page = page_count;
		show_data(page_count);	
	});
	
	$("#btn_add").click(function() {
		//初始化表单		
		$("#name").val("");
		$("#pwd").val("");
		$("#pwd2").val("");
		
		$("#btn_submit").val("添加");
		
		$("#add_table").show();
		$("#getlist_table").hide();
	});
	$("#btn_getlist").click(function() {
		$("#add_table").hide();
		$("#getlist_table").show();
		
		show_data(curr_page);
	});
	$("#add_table").hide();
	
	$("#main_form").validate({
		rules: {
			name: {
				required: true,
				minlength: 5
			},
			pwd: {
				required: true,
				minlength: 5,
				equalTo: "#pwd2"
			}
		},
		messages: {
			name: {
				required: "没有填写用户名",
				minlength: $.validator.format("用户名不能小于{0}个字符")
			},
			pwd: {
				required: "没有填写密码",
				minlength: "密码不能小于{0}个字符",
				equalTo: "两次输入密码不一致"
			}
		},
		submitHandler: function(form) {
			
			var data = {
				name: $("#name").val(),
				pwd: hex_md5($("#pwd").val()),
				pwd2: hex_md5($("#pwd2").val())
			};
			
			$.ajax({
				url: cfg.web_root + "mgr/user/add",
				type: "post",
				dataType: "json",
				data: data,
				beforeSend: function() {
					$("#btn_submit").attr("disabled", true);
				},
				success: function(res, status) {
					if(res.code == 0) {
						$("#btn_getlist").get(0).click();						
					}
					else {
						$("#dialog_alert").find(".modal-body").html(res.msg);
						$("#dialog_alert").modal("show");
					}
				},
				complete: function() {
					$("#btn_submit").attr("disabled", false);
				}
			});
			
			return false;
		}
	});
	
});
</script>		
        </div>
    </div>
	
</body>
</html>
